<template>
  <div>
    <p style="text-align: left;text-indent: 16px;font-size: 19px">当前文章<!--ID:{{upid}}--></p>
    <div style="text-align: left;margin: 30px 15px;">
      <font size="4" style="margin-right: 30px;">选择文章类型</font>

      <RadioGroup v-model="uptype" size="large">
        <Radio v-for="item in upTypeList" :label="item.label" :key="item.label">{{ item.value }}</Radio>
      </RadioGroup>
    </div>
    <div style="text-align: left;margin: 30px 15px;">
      <font size="4" style="margin-right: 30px;">选择语言类型</font>
      <RadioGroup v-model="upLanguageType" >
        <Radio v-for="item in radioList" :label="item.label" :key="item.label">{{ item.value }}</Radio>
      </RadioGroup>
    </div>
    <Input v-model="uptitle" placeholder="文章标题" size='large' style="margin: 0px auto 30px; width: 868px;"></Input>
    <div class="hello" style="width: 868px;margin: 0 auto 30px;">
      <div id="editor" type="text/plain" style="width:868px;height:500px;">
        <div>
          <quill-editor v-model="upcontent" ref="myQuillEditor" @change="onEditorChange($event)">
          </quill-editor>
          <div style="height:65px;border: 1px;">
            <div class="demo-upload-list" v-for="item in uploadList">
              <template v-if="item.status === 'finished'">
                <img :src="'http://'+item.response.data.picName">
                <div class="demo-upload-list-cover">
                  <Icon type="ios-eye-outline" @click.native="handleView(item.response.data.picName)"></Icon>
                  <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
                </div>
              </template>
              <template v-else>
                <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
              </template>
            </div>
          </div>
          <input id="upload" type="file" style="display: none;" />
        </div>
      </div>
    </div>
    <Button type="primary" style="background: #3da2ef; width: 110px;height: 40px;font-size: 18px; margin-bottom: 30px;" @click="addNotice()" id="butID">{{buttonName}}</Button>
  </div>

</template>
<script >
  import Vue from 'vue'
  import ossClient from '../../../static/aliyun-oss-sdk-4.4.4.min'
  import $ from '../../../static/jquery-1.10.2.min.js'

  Vue.use(VueQuillEditor)


  export default {
    components: {
      quillEditor: VueQuillEditor.quillEditor
    },
    data() {
      return {
        visible: false,
        src: '',
        uploadList: '',
        show1:true,
        buttonName:'修改公告',
        upTypeList:[
          {label:'0',value:'系统公告'},
          {label:'1',value:'活动公告'},
          {label:'2',value:'其它公告'}
        ],
        radioList:[
          {label : '1',value : "中文"},
          {label : '2',value : "英文"},
          {label : '3',value : "日文"}
        ],
        uptitle:this.title,
        upid:this.id,
        upcontent:this.content,
        uptype : this.type.toString(),
        upLanguageType: this.languageType.toString(),
      }
    },
    props: {
      title:{
        type:String,
        default:'标题'
      },
      content:{
        type:String,
        default:'内容'
      },
      type:{
        type:Number,
        default:1
      },
      id:{
        tupe:Number,
        default:1
      },
      imgUrl: {
        type: String,
        default: ''
      },
      accept: {
        type: Array
      },
      maxsize: {
        type: Number,
        default: 20480
      },
      languageType:{
        type:Number,
        default:1
      }
    },
    computed: {
      editor() {
        return this.$refs.myQuillEditor.quill
      },
    },
    mounted() {
      //给img video按键绑定事件
      this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', this.imgClick);
      var _self = this;
      $('#upload').change(function() {
        var service = "nb-web/api";
        var url = '';
        var random = Math.random().toString(36).substr(2);
        return ossClient.urllib.request(_self.host + _self.service + '/upload/getOssStsToKen', {
          method: 'post'
        }).then(function(result) {
          var creds = JSON.parse(result.data);
          var aliyun = creds.result.data.domain;
          var client = new ossClient.Wrapper({
            region: 'oss-cn-shenzhen',
            accessKeyId: creds.result.data.accessKeyId,
            accessKeySecret: creds.result.data.accessKeySecret,
            stsToken: creds.result.data.securityToken,
            bucket: creds.result.data.bucket
          });
          var key = _self.formatDate(new Date(), 'yyyyMMdd') + '/' + random;
          var file = document.getElementById('upload').files[0];
          return client.multipartUpload(key, file, {}).then(function(res) {
            url =aliyun + res.name;
            _self.addRange = _self.$refs.myQuillEditor.quill.getSelection();
            var aaa = _self.editor.getSelection();
            console.log(aaa);
            _self.$refs.myQuillEditor.quill.insertEmbed(_self.editor.getSelection().index, 'image',url);
          });
        })
      });
    },
    methods: {
      //点击图片触发事件
      imgClick() {
        var _self = this;
        $('#upload').click();

      },

      upTypeChange(obj){
        console.log(obj);
        this.upType=obj.value;
      },
      onEditorChange({
                       editor,
                       html,
                       text,
                     }) {
        this.$emit('toapp', html);
      },
      addNotice:function () {
        var self = this;
        var qs = require('qs');
        if(self.uptitle ==''){
          self.$Message.error({
            title: '',
            content: '请输入文章标题',
          },200);
          return
        }
        if(self.upcontent ==''){
          self.$Message.error({
            title: '',
            content: '请输入文章内容',
          },200);
          return
        }

        if (self.upLanguageType == ''){
          self.$Message.error({
            title: '',
            content: '请选择语言类型',
          },200);
          return;
        }
        var butID= document.getElementById('butID')
        butID.disabled = true;
        self.buttonName =  '处理中...';

        self.upcontent = self.upcontent.replace(/\t/g,'&nbsp;&nbsp;&nbsp;&nbsp;')
        self.upcontent = self.upcontent.replace(/ {1}/g,'&nbsp;')
        self.$http.post(self.service+'/affiche/update',{
            id:self.upid,
            content:self.upcontent,
            title:self.uptitle,
            type:self.uptype,
            languageType:self.upLanguageType
          }
        ).then((res) => {
          self.upcontent = '';
          self.uptitle = '';

          self.$Message.info({
            title: '',
            content: res.data.msg,
            duration: 1
          },200);
          butID.disabled = true;
          self.buttonName =  '修改成功'
        })
      },

    },
    created:function () {

    }
  };
</script>
<style>
  .demo-upload-list {
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    margin-right: 4px;
  }
  .demo-upload-list:hover .demo-upload-list-cover {
    display: block;
  }

  .demo-upload-list-cover {
    color: #fff;
    font-size: 16px;
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .6);
  }
  .ql-editor{
    height: 430px;
    font-size: 14px;
  }
  .ql-toolbar{
    text-align: left;
  }
</style>
